<style lang="less">
    @import "../styles/unlock.less";
</style>

<template>
    <transition name="show-unlock">
        <div class="unlock-body-con" v-if="showUnlock" @keydown.enter="handleUnlock">
            <div @click="handleClickAvator" class="unlock-avator-con" :style="{marginLeft: avatorLeft}">
                <img class="unlock-avator-img" :src="avatorPath">
                <div class="unlock-avator-cover">
                    <span><Icon type="unlocked" :size="30"></Icon></span>
                    <p>解锁</p>
                </div>
            </div>
            <div class="unlock-avator-under-back" :style="{marginLeft: avatorLeft}"></div>
            <div class="unlock-input-con">
                <div class="unlock-input-overflow-con">
                    <div class="unlock-overflow-body" :style="{right: inputLeft}">
                        <input ref="inputEle" v-model="password" class="unlock-input" type="password"
                               placeholder="密码同登录密码"/>
                        <button ref="unlockBtn" @mousedown="unlockMousedown" @mouseup="unlockMouseup"
                                @click="handleUnlock" class="unlock-btn">
                            <Icon color="white" type="key"></Icon>
                        </button>
                    </div>
                </div>
            </div>
            <div class="unlock-locking-tip-con">已锁定</div>
        </div>
    </transition>
</template>

<script>
    import Cookies from 'js-cookie';
    import {get_password} from '@/utils/config_common.js';
    import config_api from '@/utils/config_api.js';

    export default {
        name: 'Unlock',
        data () {
            return {
                avatorLeft: '0px',
                inputLeft: '400px',
                password: '',
                check: null,
                phone: ''
            };
        },
        props: {
            showUnlock: {
                type: Boolean,
                default: false
            }
        },
        computed: {
            avatorPath () {
                return localStorage.areaAvatorImgPath;
            }
        },
        created () {
            this.phone = Cookies.get(`area_cloud_user`);
        },
        methods: {
            validator () {

                // 你可以在这里写密码验证方式，如发起ajax请求将用户输入的密码this.password与数据库用户密码对比
            },
            handleClickAvator () {
                this.avatorLeft = '-180px';
                this.inputLeft = '0px';
                this.$refs.inputEle.focus();
            },
            handleUnlock () {
                let opts = {
                    url: `${this.$hostUrl.cloud_host_v2}${config_api.login.url}`,
                    method: config_api.login.method
                };
                let params = {
                    phone: this.phone,
                    password: this.password,
                    sys_mark: 'proxy_bbc'
                };
                this.$axios({
                    method: opts.method,
                    url: opts.url,
                    data: params
                })
                    .then(res => {
                        res = res.data;
                        if (res.status == 200) {
                            this.avatorLeft = '0px';
                            this.inputLeft = '400px';
                            this.password = '';
                            Cookies.set('area_locking', '0');
                            this.$emit('on-unlock');
                        } else {
                            this.$Message.error(res.message);
                        }
                    });
                // if (this.validator()) {

                // } else {
                //   this.$Message.error("密码错误,请重新输入");
                // }
            },
            unlockMousedown () {
                this.$refs.unlockBtn.className = 'unlock-btn click-unlock-btn';
            },
            unlockMouseup () {
                this.$refs.unlockBtn.className = 'unlock-btn';
            }
        }
    };
</script>
